<template>
  <div class="container" style="margin-bottom: 50px">
    <p class="title">
      流程详情
      <el-button
        type="primary"
        class="btn"
        @click="$router.back()"
      >返回</el-button>
    </p>
    <el-form ref="form" label-width="80px" style="width: 80%">
      <el-form-item label="基本信息">
        <label for="">流程编号: </label> <span>{{ info.orderNo }}</span><br>
        <label for="">流程类型: </label>
        <span>{{ ["安心购车", "简易购车"][info.buyWay] }}</span><br>
        <label for="">创建时间: </label><span>{{ info.createTime }}</span><br>
        <label for="">交易类型: </label><span>{{ ["本地购车", "异地购车"][info.transactionType] }}</span><br>
        <label for="" style="color:#00f">流程状态: </label><span style="color:#00f">{{ ["进行中", "已完成", "已关闭"][info.orderStatus] }}</span>
      </el-form-item>
      <el-form-item label="流程进度">
        <el-tabs type="card">
          <el-tab-pane :label="carTest.buyerPickCarConfirm.finishedTime?'车辆检测(已完成)':'车辆检测(未完成)'">
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      买方发起车辆检测申请
                      <span
                        v-if="carTest.buyerDetectionConfirm.finishedTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span>
                      确认完成时间
                      {{ carTest.buyerDetectionConfirm.finishedTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <div>
                  <b>选择套餐</b>  {{ detectionType[carTest.buyerDetectionConfirm.detectionType] }} &nbsp;&nbsp;
                  {{ carTest.buyerDetectionConfirm.detectionPrice || 0 }} 元
                </div>
                <!-- <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> -->
              </el-collapse-item>
              <p class="line">
                <span class="left">
                  买方做活体实名认证
                  <span
                    v-if="carTest.buyerRealNameAuth.finishedTime"
                    class="arrow"
                  >
                    √</span>
                </span>
                <span style="width: 551px;">
                  认证完成时间：{{ carTest.buyerRealNameAuth.finishedTime }}
                </span>
              </p>
              <el-collapse-item title="">
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      卖方签约并支付保证金
                      <span
                        v-if="carTest.sellerSignContract.finishedTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span>
                      确认完成时间 {{ carTest.sellerSignContract.finishedTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <b>车况担保金订单信息</b>
                <div>
                  订单编号 ： {{ carTest.sellerSignContract.orderNo }}
                  <span
                    v-if="carTest.sellerSignContract.orderNo"
                    style="color:#00f;cursor: pointer;"
                    @click="openUrls('车况担保金订单信息',carTest.sellerSignContract.orderNo)"
                  >查看详情</span>
                </div>
                <div>
                  创建时间 ： {{ carTest.sellerSignContract.createTime }}
                </div>
              </el-collapse-item>
              <el-collapse-item title="可控 Controllability">
                <template slot="title">
                  <p class="line" style="height: 60px">
                    <span class="left">
                      买方签约并支付车辆检测费用
                      <span
                        v-if="carTest.buyerDetectionFee.finishedTime"
                        class="arrow"
                      >√</span>
                    </span>
                    <span style="line-height: 30px">
                      签约成功时间：
                      {{ carTest.buyerSignContract.finishedTime }} <br>
                      支付完成时间: {{ carTest.buyerDetectionFee.finishedTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <el-row>
                  <el-col :span="12">
                    <b>检测信息</b>
                    <p>
                      检测时间 ：{{ carTest.buyerDetectionFee.detectionDate }}
                    </p>
                    <p>检测地址 ：{{ carTest.buyerDetectionFee.address }}</p>
                    <p>
                      {{
                        detectionType[carTest.buyerDetectionFee.detectionType] || '全车检测'
                      }}
                      ：{{ carTest.buyerDetectionFee.detectionPrice }}
                    </p>
                    <p>交通费 ：{{ carTest.buyerDetectionFee.travelCost }}</p>
                    <p>总价 ：{{ carTest.buyerDetectionFee.totalPrice }}</p>
                  </el-col>
                  <el-col :span="12">
                    <b>订单信息 </b> <span v-if="carTest.buyerDetectionFee.orderNo " style="color:#00f;cursor: pointer;" @click="openUrls('买方签约并支付车辆检测费用')">查看详情</span>
                    <p>订单编号: {{ carTest.buyerDetectionFee.orderNo }}</p>
                    <p>创建时间: {{ carTest.buyerDetectionFee.createTime }}</p>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <p class="line">
                <span
                  class="left"
                >第三方上门检测
                  <span
                    v-if="carTest.buyerRealNameAuth.finishedTime"
                    class="arrow"
                  >
                    √</span></span>
                <span>检测单号：{{
                  carTest.detectionReport.reportDetectionNo
                }}</span>
                <span />
              </p>
              <el-collapse-item>
                <template slot="title">
                  <p class="line" style="height: 60px; position: relative">
                    <span class="left">
                      检测报告
                      <span
                        v-if="carTest.detectionReport.buyerGetCarConfirmTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span style="width: 500px; line-height: 30px">
                      检测完成时间： {{ carTest.detectionReport.reportCreateTime
                      }}<br>
                      <span>买方确认要车：
                        {{
                          carTest.detectionReport.buyerGetCarConfirmTime? carTest.detectionReport.buyerGetCarConfirmTime:''
                        }}</span>
                    </span>
                  </p>
                </template>
                <p>
                  查博士订单号： {{ carTest.detectionReport.reportDetectionNo }}
                </p>
                <p>
                  报告生成时间： {{ carTest.detectionReport.reportCreateTime }}
                </p>
                <p>车辆评级： {{ [ 'R（大事故车）', 'S级'] [carTest.detectionReport.reportCarLevel] }}</p>
                <p>
                  报告结果：
                  <span
                    v-if="carTest.detectionReport.reportUrl"
                    style="color:#00f;cursor: pointer;"
                    @click="MyopenUrl(carTest.detectionReport.reportUrl)"
                  >查看结果</span>
                </p>
                <p>
                  确认要车时间：
                  {{ carTest.detectionReport.buyerGetCarConfirmTime }}
                </p>
              </el-collapse-item>
              <el-collapse-item title="卖方确认交车信息">
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      卖方确认交车信息
                      <span
                        v-if="carTest.sellerGiveCarConfirm.finishedTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span style="width:500px">
                      确认时间 {{ carTest.sellerGiveCarConfirm.finishedTime
                      }}<br>
                    </span>
                  </p>
                </template>
                <el-row>
                  <el-col :span="12">
                    <b>交付信息</b>
                    <p>
                      交付时间: {{ carTest.sellerGiveCarConfirm.vechileGetTime }}
                    </p>
                    <p>
                      交付地点: {{ carTest.sellerGiveCarConfirm.detailAddress }}
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <b>账单信息</b>
                    <p>定金: {{ carTest.sellerGiveCarConfirm.deposit }} 元</p>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item title="买方确认提车信息">
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      买方确认提车信息
                      <span
                        v-if="carTest.buyerPickCarConfirm.finishedTime"
                        class="arrow"
                      >√</span>
                    </span>
                    <span>
                      确认时间 {{ carTest.buyerPickCarConfirm.finishedTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <b>交付信息</b>
                    <p>
                      交付时间: &nbsp;{{
                        carTest.buyerPickCarConfirm.vechileGetTime
                      }}
                    </p>
                    <p>
                      交付城市: &nbsp;{{ carTest.buyerPickCarConfirm.cityName }}
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <b>账单信息</b>
                    <p>
                      定金: &nbsp;
                      {{ carTest.buyerPickCarConfirm.deposit || 0 }}元
                    </p>
                    <p>
                      尾款: &nbsp;
                      {{ carTest.buyerPickCarConfirm.balancePayment || 0 }} 元
                    </p>
                    <p>
                      总价: &nbsp;
                      {{ carTest.buyerPickCarConfirm.totalPrice || 0 }} 元
                    </p>
                  </el-col>
                </el-row>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane :label="shopping.buyerPayOtherFee.finishedTime?'购车签约（已完成)':'购车签约（未完成)'">
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      卖方设置存管账户
                      <span
                        v-if="shopping.sellerSetAccount.finishedTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span v-if="shopping.sellerSetAccount.finishedTime">
                      设置完成时间：{{ shopping.sellerSetAccount.finishedTime }}
                    </span>
                    <span v-if="shopping.sellerSetAccount.tips">
                      {{ shopping.sellerSetAccount.tips }}
                    </span>
                    <span />
                  </p>
                </template>
                <p>卖方存款账号 : {{ shopping.sellerSetAccount.account | filterBrandCode }}</p>
                <p>开户人: {{ shopping.sellerSetAccount.name }}</p>
                <p>联系电话: {{ shopping.sellerSetAccount.mobile | filterMoblie }}</p>
                <p>身份证:{{ shopping.sellerSetAccount.idCard | filterBrandCode }}</p>
                <p>存管银行 : {{ shopping.sellerSetAccount.bankName }}</p>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      买方设置存管账户
                      <span
                        v-if="shopping.buyerSetAccount.finishedTime"
                        class="arrow"
                      >
                        √</span></span>
                    <span v-if="shopping.buyerSetAccount.finishedTime">
                      设置完成时间：{{
                        shopping.buyerSetAccount.finishedTime
                      }}</span>
                    <span v-if="shopping.buyerSetAccount.tips">
                      {{ shopping.buyerSetAccount.tips }}
                    </span>

                    <span />
                  </p>
                </template>
                <p v-if="shopping.buyerSetAccount.remark ">失败原因：{{ shopping.buyerSetAccount.remark }}</p>
                <p>买方存款账号 : {{ shopping.buyerSetAccount.account | filterBrandCode }}</p>
                <p>开户人: {{ shopping.buyerSetAccount.name }}</p>
                <p>联系电话: {{ shopping.buyerSetAccount.mobile | filterMoblie }}</p>
                <p>身份证:{{ shopping.buyerSetAccount.idCard | filteridCardNo }}</p>
                <p>存管银行 : {{ shopping.buyerSetAccount.bankName }}</p>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      买方签订交易合同
                      <span
                        v-if="shopping.buyerSignContract.finishedTime"
                        class="arrow"
                      >
                        √</span></span>
                    <span>
                      签订完成时间:
                      {{ shopping.buyerSignContract.finishedTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <p>
                  买方合同:
                  <span
                    v-if="shopping.buyerSignContract.contractUrl"
                    style="color:#00f;cursor: pointer;"
                    @click="openUrl(shopping.buyerSignContract.contractUrl)"
                  >查看合同</span>
                </p>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      卖方签订交易合同
                      <span
                        v-if="shopping.sellerSignContract.finishedTime"
                        class="arrow"
                      >
                        √</span></span>
                    <span>
                      签订完成时间:
                      {{ shopping.sellerSignContract.finishedTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <p>
                  卖方合同:
                  <span
                    v-if="shopping.sellerSignContract.contractUrl"
                    style="color:#00f;cursor: pointer;"
                    @click="openUrl(shopping.sellerSignContract.contractUrl)"
                  >查看合同</span>
                </p>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left" style="width: 250px">
                      买方支付车辆定金，合同服务费等费用
                      <span
                        v-if="shopping.buyerPayOtherFee.finishedTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span>
                      确认时间: {{ shopping.buyerPayOtherFee.finishedTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <b>定金账单</b>
                <p>定金: {{ shopping.buyerPayOtherFee.deposit }} 元</p>
                <b>服务费用信息</b>
                <p>合同服务费: {{ shopping.buyerPayOtherFee.contractFee }}元</p>
                <p>
                  车务代办(可选):
                  {{ shopping.buyerPayOtherFee.vehicleAgentFee }} 元
                </p>
                <p>上牌城市: {{ shopping.buyerPayOtherFee.spCityName }}</p>
                <b>存款账户信息</b>
                <p>存款银行: {{ shopping.buyerPayOtherFee.bankName }}</p>
                <p>姓名: {{ shopping.buyerPayOtherFee.name }}</p>
                <p>存款账号: {{ shopping.buyerPayOtherFee.account }}</p>
                <b>到账情况</b>
                <p>
                  存款账号可提现余额:
                  {{ shopping.buyerPayOtherFee.withdrawalBalance || 0 }} 元
                </p>
                <p>
                  还需转入金额: {{ shopping.buyerPayOtherFee.changeIntoAmount || 0 }} 元
                </p>
                <b>总需交费用</b>
                <p>合计：{{ allPrice }} 元</p>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane :label="vehicleHandover.buyerPayBalanceConfirmTime?'车辆交接（已完成）':'车辆交接（未完成）'">
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left"> 买方申请车
                      <span
                        v-if="vehicleHandover.buyerGetCarConfirmTime"
                        class="arrow"
                      >
                        √</span>

                    </span>
                    <span>
                      确认时间
                      {{ vehicleHandover.buyerGetCarConfirmTime }}</span>
                    <span />
                  </p>
                </template>
                <b>交车信息</b>
                <p>交付人: {{ deliveryInfo.deliveryName }}</p>
                <p>交付人电话: {{ deliveryInfo.deliveryMobile }}</p>
                <p>交付时间: {{ deliveryInfo.deliveryTime }}</p>
                <p>交付地点: {{ deliveryInfo.deliveryAddress }}</p>
                <b>收车信息</b>
                <p>验收人:{{ shopping.buyerSetAccount.name }}</p>
                <p>验收人电话:{{ shopping.buyerSetAccount.mobile }}</p>
                <b>车务信息</b>
                <p>车务代办员: {{ vehicleAgent.vehicleAgentName }}</p>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left"> 卖方确认交车信息

                      <span
                        v-if="vehicleHandover.sellerGetCarConfirmTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span>
                      确认时间 {{ vehicleHandover.sellerGetCarConfirmTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <b>交车信息</b>
                <p>交付人: {{ deliveryInfo.deliveryName }}</p>
                <p>交付人电话: {{ deliveryInfo.deliveryMobile }}</p>
                <p>交付地点: {{ deliveryInfo.deliveryAddress }}</p>
                <p>交付时间: {{ deliveryInfo.deliveryTime }}</p>
                <b>收车信息</b>
                <p>验收人:{{ shopping.buyerSetAccount.name }}</p>
                <p>验收人电话:{{ shopping.buyerSetAccount.mobile }}</p>
                <b>车务信息</b>
                <p>车务代办员: {{ vehicleAgent.vehicleAgentName }}</p>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left"> 买方确认签收车辆
                      <span
                        v-if="vehicleHandover.buyerSignCarConfirmTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span>
                      签收时间
                      {{ vehicleHandover.buyerSignCarConfirmTime }}</span>
                    <span />
                  </p>
                </template>
                <b>车辆验收照片</b>
                <div class="content">
                  <!-- <div v-for="(item,i) in acceptanceCheckImage" :key="i" class="box"> -->
                  <img v-if="acceptanceCheckImage" :src="acceptanceCheckImage" style="width:200px;height:100px" @click="open(acceptanceCheckImage)">
                  <!-- </div> -->
                </div>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left"> 卖方确认交付车辆

                      <span
                        v-if="vehicleHandover.sellerGiveCarConfirmTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span>
                      确认时间
                      {{ vehicleHandover.sellerGiveCarConfirmTime }}</span>
                    <span />
                  </p>
                </template>
                <b>车辆验收照片</b>
                <div class="content">
                  <!-- <div v-for="(item,i) in SellerAcceptanceCheckImage" :key="i" class="box"> -->
                  <img v-if="SellerAcceptanceCheckImage" style="width:200px;height:100px" :src="SellerAcceptanceCheckImage" @click="open(SellerAcceptanceCheckImage)">
                  <!-- </div> -->
                </div>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left"> 确认尾款

                      <span
                        v-if="vehicleHandover.buyerPayBalanceConfirmTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span>
                      确认时间 {{ vehicleHandover.buyerPayBalanceConfirmTime }}
                    </span>
                    <span />
                  </p>
                </template>
                <b>尾款账单</b>
                <p>尾款: {{ info.balancePayment }} 元</p>
                <p>总价: {{ info.amount }} 元</p>
                <b>存管账户信息</b>
                <p>存管银行:{{ depositAccount.bankName }}</p>
                <p>姓名:{{ depositAccount. name }}</p>
                <p>存管账号:{{ depositAccount.account }}</p>
                <b>尾款到账情况</b>
                <p>存管账户可提现余额:{{ depositAccount.withdrawalBalance }} 元</p>
                <p v-if="info.balancePayment && info.amount && Number(info.amount-info.balancePayment-depositAccount.withdrawalBalance).toFixed(2) > 0">还需转入金额：{{ Number(info.amount-info.balancePayment-depositAccount.withdrawalBalance).toFixed(2) }}元</p>
                <p v-else>还需转入金额：0 元</p>

              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane :label="fileTransfer.buyerAssignedInfoConfirmTime?'提档过户（已完成）':'提档过户（未完成）'">
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      买方确认车务代办凭证
                      <span
                        v-if="fileTransfer.buyerAssignedAgencyConfirmTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span style="width:500px">
                      确认时间:{{ fileTransfer.buyerAssignedAgencyConfirmTime }}
                    </span>
                  </p>
                </template>
                <b>车务代办凭证</b>
                <p class="box">
                  <img
                    v-for="item in ListByCarInfoId"
                    :key="item.id"
                    style="width:200px;height:100px;margin-right: 5px;"
                    :src="item.url"
                    @click="open(item.url)"
                  >
                </p>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <p class="line">
                    <span class="left">
                      买方确认过户资料
                      <span
                        v-if="fileTransfer.buyerAssignedInfoConfirmTime"
                        class="arrow"
                      >
                        √</span>
                    </span>
                    <span style="width:500px">
                      确认时间:{{ fileTransfer.buyerAssignedInfoConfirmTime }}
                    </span>
                  </p>
                </template>
                <b>过户手续资料照片</b>
                <p class="box">
                  <img
                    v-for="(item,i) in ListByVehicleAssignedInfoIdType"
                    :key="i"
                    style="width:200px;height:100px;margin-right:5px"
                    :src="item"
                    @click="open(item)"
                  >
                </p>
                <b>签收资料照片</b>
                <div v-if="ByVehicleOrderId" class="content">
                  <p v-if="ByVehicleOrderId.registryCertificate" class="box">
                    <img
                      style="width:200px;height:100px"
                      :src="ByVehicleOrderId.registryCertificate"
                      @click="open(ByVehicleOrderId.registryCertificate)"
                    >
                  </p>
                  <p v-if="ByVehicleOrderId.travelLicense" class="box">
                    <img
                      style="width:200px;height:100px"
                      :src="ByVehicleOrderId.travelLicense"
                      @click="open(ByVehicleOrderId.travelLicense)"
                    >
                  </p>
                  <p v-if="ByVehicleOrderId.vehicleKey" class="box">
                    <img
                      style="width:200px;height:100px"
                      :src="ByVehicleOrderId.vehicleKey"
                      @click="open(ByVehicleOrderId.vehicleKey)"
                    >
                  </p>
                  <p v-if="ByVehicleOrderId.stransactionInvoice" class="box">
                    <img
                      style="width:200px;height:100px"
                      :src="ByVehicleOrderId.stransactionInvoice"
                      @click="open(ByVehicleOrderId.stransactionInvoice)"
                    >
                  </p>
                  <p v-if="ByVehicleOrderId.btransactionInvoice" class="box">
                    <img
                      style="width:200px;height:100px"
                      :src="ByVehicleOrderId.btransactionInvoice"
                      @click="open(ByVehicleOrderId.btransactionInvoice)"
                    >
                  </p>
                </div>
              </el-collapse-item>
            </el-collapse> </el-tab-pane></el-tabs>
      </el-form-item>
      <el-form-item label="车辆信息">
        <label for="">VIN: </label><span style="color:#00f;cursor: pointer;" @click="$router.push(`/carAdmin/saleList?carInfoId=${info.carInfoId}`)">{{ carInfo.vin }}</span> <br>
        <label for="">行驶证: </label><span>
          <img style="width: 120px; height: 50px;cursor: pointer;" :src="carInfo.imgZy" @click="open(carInfo.imgZy)">
        </span>
        <br>
        <label for="">车牌号: </label><span>{{ carInfo.vehicleNo }}</span><br>
        <label for="">使用性质: </label><span>{{
          ["非营运", "营运", "营转非", "租赁", "教练"][carInfo.isUse]
        }}</span><br>
        <label for="">初次上牌日期: </label><span>{{ carInfo.spTime }}</span><br>
        <label for="">品牌车型: </label><span>{{ carInfo.modelName }}</span><br>
        <label for="">上架价格: </label><span>{{ carInfo.amount || 0 }} 万</span><br>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="买方信息">
            <label for="">用户ID: </label> <span>{{ userInfo.id }}</span> <br>
            <label for="">用户身份: </label><span>{{ ["普通用户", "经纪人", "车务"][userInfo.roleType] }}</span><br>
            <label for="">联系人: </label><span>{{ userInfo.name }}</span><br>
            <label for="">手机号: </label><span>{{ userInfo.mobile }}</span><br>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卖方信息">
            <label for="">用户ID: </label> <span>{{ sellerInfo.id }}</span>
            <br>
            <label for="">用户身份: </label><span>{{
              ["普通用户", "经纪人", "车务"][sellerInfo.roleType]
            }}</span><br>
            <label for="">联系人: </label><span>{{ sellerInfo.name }}</span><br>
            <label for="">手机号: </label><span>{{ sellerInfo.mobile }}</span><br>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="买方经纪人信息" label-width="110px">
            <label for="">用户ID: </label>
            <span v-if="userInfo.roleType == 1">{{ userInfo.id }}</span> <br>
            <label for="">用户身份: </label><span v-if="userInfo.roleType == 1">{{
              ["普通用户", "经纪人", "车务"][userInfo.roleType]
            }}</span><br>
            <label for="">联系人: </label><span v-if="userInfo.roleType == 1">{{ userInfo.name }}</span><br>
            <label for="">手机号: </label><span v-if="userInfo.roleType == 1">{{ userInfo.mobile }}</span><br>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卖方经纪人信息" label-width="110px">
            <label for="">用户ID: </label>
            <span v-if="sellerInfo.roleType == 1">{{ sellerInfo.id }}</span>
            <br>
            <label for="">用户身份: </label><span v-if="sellerInfo.roleType == 1">{{
              ["普通用户", "经纪人", "车务"][sellerInfo.roleType]
            }}</span><br>
            <label for="">联系人: </label><span v-if="sellerInfo.roleType == 1">{{ sellerInfo.name }}</span><br>
            <label for="">手机号: </label><span v-if="sellerInfo.roleType == 1">{{ sellerInfo.mobile }}</span><br>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogVisible"
      width="1300px"
      title="报告详情"
    >
      <div class="scroll">
        <iframe
          border="0"
          frameborder="0"
          marginwidth="0"
          marginheight="0"
          scrolling="yes"
          style="
            width: 1200px;
            height: 800px;
            overflow: scroll;
            overflow-x: hidden;
          "
          :src="url"
        />
      </div>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogVisible1"
      width="400px"
      title="报告详情"
    >
      <div class="scroll">
        <iframe
          border="0"
          frameborder="0"
          marginwidth="0"
          marginheight="0"
          scrolling="yes"
          style="
            width: 352px;
            height: 800px;
            overflow: scroll;
            overflow-x: hidden;
          "
          :src="url"
        />
      </div>
    </el-dialog>
    <el-dialog
      title="图片"
      :visible.sync="imgDialogVisible"
      width="800px"
    >
      <img :src="imgUrl" style="width:750px">
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      url: '',
      imgDialogVisible: false,
      imgUrl: '',
      dialogVisible: false,
      dialogVisible1: false,
      info: {
        vehicleOrderId: null, // 车辆订单id
        orderNo: null, // 订单号（流程编号）
        buyWay: null, // "流程类型(购车方式：0 保障购车，1简易购车)
        transactionType: null, // 交易类型,0本地购车，1异地购车
        createTime: null, // 创建时间
        orderStatus: null, // 订单状态：0进行中，1已完成，2已关闭
        buserId: null, // 买方用户ID
        suserId: null // 卖方用户ID
      },
      carInfo: {
        id: 90000, // 车辆id
        brandName: '捷豹',
        seriesName: 'XK',
        modelName: '2012款 XKR-S 5.0L 硬顶版', // 品牌车型
        amount: 10.35, // 上架价格
        vin: 'LGXC76C34J00890000', // VIN
        spTime: '2021-02-15', // 初次上牌日期
        travelMileage: 10,
        spCityName: '北京市',
        imgZy:
          'https://ecar-test.oss-cn-shenzhen.aliyuncs.com/ecar/app/vehicleTravel/d7b3a0a7-2b29-43d4-9e18-6dfef2dc3e7b.jpg', // 行驶证图片
        vehicleNo: 'vehicleNo1', // 车牌号
        isUse: 1 // 使用性质 0-非营运,1-营运,2-营转非,3-租赁,4-教练
      },
      userInfo: {
        id: 148, // 用户id
        roleType: 0, // 角色类型：0普通用户 1经纪人 2车务
        name: '许芬勇', // 联系人
        mobile: '14718099417' // 联系方式(手机号)
      },
      detectionType: {
        101: '事故排查检测',
        102: '重要部件检测',
        103: '全面检测'
      },
      sellerInfo: {},
      carTest: {
        buyerDetectionConfirm: {},
        buyerSignContract: {},
        buyerRealNameAuth: {},
        sellerSignContract: {},
        buyerDetectionFee: {},
        detectionReport: {},
        sellerGiveCarConfirm: {},
        buyerPickCarConfirm: {}
      },
      shopping: {
        buyerSetAccount: {}, // 买方设置存管账户
        sellerSetAccount: {}, // 卖方设置存管账户
        buyerSignContract: {}, // 买方签订交易合同
        sellerSignContract: {}, // 卖方签订交易合同
        buyerPayOtherFee: {} // 买方支付车辆定金、合同服务费等费用
      },
      vehicleHandover: {
        buyerGetCarConfirmTime: '', // 买方申请提车确认完成时间
        sellerGetCarConfirmTime: '', // 卖方确认交车信息确认完成时间
        buyerSignCarConfirmTime: '', // 买方确认签收车辆确认完成时间
        sellerGiveCarConfirmTime: '', // 卖方确认交付车辆确认完成时间
        buyerPayBalanceConfirmTime: '' // 买方支付尾款ƒ确认完成时间
      },
      deliveryInfo: {
        deliveryName: '', // 交付人
        deliveryMobile: '', // 交付人电话
        deliveryAddress: '', // 交车地址
        deliveryTime: '' // 交车时间,yyyy-MM-dd
      },
      fileTransfer: {
        buyerAssignedAgencyConfirmTime: '', // 买方确认车务代办凭证-确认完成时间
        sellerAssignedAgencyConfirmTime: '', // 卖方确认车务代办凭证-确认完成时间
        buyerAssignedInfoConfirmTime: '', // 买方确认过户资料-确认完成时间
        sellerAssignedInfoConfirmTime: '' // 卖方确认过户资料-确认完成时间
      },
      vehicleAgent: {
        checkAgency: false, // 是否选择车务代办：true-是，false-否
        agencyStatus: null, // 车务代办状态
        vehicleAgentName: '', // 车务代办员
        vehicleAgentFee: null // 车务代办费用
      },
      ListByCarInfoId: [],
      ListByVehicleAssignedInfoIdType: [],
      ByVehicleOrderId: {},
      acceptanceCheckImage: '',
      SellerAcceptanceCheckImage: '',
      depositAccount: {

      },
      buyViewUrl: '',
      sellViewUrl: '',
      allPrice: 0
    }
  },
  mounted() {
    const tokenInfo = { data: {
      userInfo: { token: '' }}}
    tokenInfo.data.userInfo.token = 'bearer' + getToken()
    localStorage.setItem('stores', JSON.stringify(tokenInfo))
  },
  created() {
    this.$get(`/web/vehicleOrder/getDeliveryInfo?vehicleOrderId=${this.$route.query.id}`).then(res => {
      this.deliveryInfo = res.data.data
    })
    // this.$get(`/web/fddSign/getFddSign`, {
    //   'vehicleOrderId': this.$route.query.id, // 车辆订单id
    //   'userId': this.$route.query.userId, // 买家用户id/卖家用户id
    //   'templateType': '102'
    // }, 'json').then(res => {
    //   this.buyViewUrl = res.data.viewUrl
    // })
    // this.$get(`/web/fddSign/getFddSign`, {
    //   'vehicleOrderId': this.$route.query.id, // 车辆订单id
    //   'userId': this.$route.query.sellId, // 买家用户id/卖家用户id
    //   'templateType': '102'
    // }, 'json').then(res => {
    //   this.sellViewUrl = res.data.viewUrl
    // })
    // 获取基础信息
    this.$get(
      `/web/vehicleOrder/get?id=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.info = res.data.data
        // 【安心购车】车务待办凭证列表
        this.$get(
          `/web/vehicleAssignedAgency/getListByCarInfoId?carInfoId=${this.info.carInfoId}`
        ).then((res) => {
          if (res.data.code === '0') {
            this.ListByCarInfoId = res.data.data
          }
        })
      } else {
        this.$message.error(res.data.message)
      }
    })
    // 2-获取车辆信息
    this.$get(
      `/web/vehicleOrder/getVehicleInfo?vehicleOrderId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.carInfo = res.data.data
      }
    })
    // 3-获取用户信息
    this.$get(
      `/web/vehicleOrder/getUserInfo?vehicleOrderId=${this.$route.query.id}&type=0`
    ).then((res) => {
      if (res.data.code === '0') {
        this.userInfo = res.data.data
      }
    })
    this.$get(
      `/web/vehicleOrder/getUserInfo?vehicleOrderId=${this.$route.query.id}&type=1`
    ).then((res) => {
      if (res.data.code === '0') {
        this.sellerInfo = res.data.data
      }
    })
    this.$get(
      `/web/vehicleOrder/getVehicleDetection?vehicleOrderId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.carTest = res.data.data
      }
    })
    // 购车签约
    this.$get(
      `/web/vehicleOrder/getBuyCarSignContract?vehicleOrderId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.shopping = res.data.data
        this.$get(`/app/zaccount/updateZaccountAuth?userId=${this.$route.query.userId}`).then(res1 => {
          if (res1.data.code == 0) {
            if (res1.data.data.zauthState == 0) {
              this.shopping.buyerSetAccount.finishedTime = ''
            } else if (res1.data.data.zauthState == 1) {
              this.shopping.buyerSetAccount.finishedTime = res1.data.data.updateTime
            } else if (res1.data.data.zauthState == 2) {
              this.shopping.buyerSetAccount.finishedTime = ''
              this.shopping.buyerSetAccount.tips = '创建中'
            } else if (res1.data.data.zauthState == 3) {
              this.shopping.buyerSetAccount.finishedTime = ''
              this.shopping.buyerSetAccount.tips = '创建失败'
              this.shopping.buyerSetAccount.remark = res1.data.data.remark
            }
          }
          this.allPrice = Number(this.shopping.buyerPayOtherFee.deposit) + Number(this.shopping.buyerPayOtherFee.contractFee) + Number(this.shopping.buyerPayOtherFee.vehicleAgentFee)
          this.allPrice = Number(this.allPrice).toFixed(2)
          console.log(res)
        })
        this.$get(`/app/zaccount/updateZaccountAuth?userId=${this.$route.query.sellId}`).then(res2 => {
          if (res2.data.code == 0) {
            if (res2.data.data.zauthState == 0) {
              this.shopping.sellerSetAccount.finishedTime = ''
            } else if (res2.data.data.zauthState == 1) {
              this.shopping.sellerSetAccount.finishedTime = res2.data.data.updateTime
              console.log(this.shopping.sellerSetAccount.finishedTime)
            } else if (res2.data.data.zauthState == 2) {
              this.shopping.sellerSetAccount.finishedTime = ''
              this.shopping.sellerSetAccount.tips = '创建中'
            } else if (res2.data.data.zauthState == 3) {
              this.shopping.sellerSetAccount.finishedTime = ''
              this.shopping.sellerSetAccount.tips = '创建失败'
              this.shopping.sellerSetAccount.remark = res2.data.data.remark
            }
          }
        })
      }
    })
    // 【安心购车】车辆交接
    this.$get(
      `/web/vehicleOrder/getVehicleHandover?vehicleOrderId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.vehicleHandover = res.data.data
      }
    })
    // 【安心购车】提档过户
    this.$get(
      `/web/vehicleOrder/getFileTransfer?vehicleOrderId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.fileTransfer = res.data.data
      }
    })
    // 【安心购车】车务待办凭证
    this.$get(
      `/web/vehicleOrder/getVehicleAgent?vehicleOrderId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.vehicleAgent = res.data.data
      }
    })
    // 【安心购车】车务待办凭证列表
    this.$get(
      `/web/vehicleAssignedAgency/getListByCarInfoId?carInfoId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.ListByCarInfoId = res.data.data
      }
    })

    this.$get(`/web/vehicleAssignedInfo/getByVehicleOrderId?vehicleOrderId=${this.$route.query.id}`).then(res => {
      if (res.data.code === '0') {
        this.ByVehicleOrderId = res.data.data
        console.log(this.ByVehicleOrderId)
        // 【安心购车】获取过户资料照片列表
        this.$get(`/web/vehicleAssignedImage/getListByVehicleAssignedInfoIdType?vehicleAssignedInfoId=${this.ByVehicleOrderId.id}&type=1`).then(res => {
          // ListByVehicleAssignedInfoIdType
          if (res.data.code === '0') {
            this.ListByVehicleAssignedInfoIdType = res.data.data
          }
        })
      }
    })
    // 【安心购车】车辆验收图片
    this.$get(`/web/vehicleOrder/getAcceptanceCheckImage?vehicleOrderId=${this.$route.query.id}&type=0`).then(res => {
      this.acceptanceCheckImage = res.data.data.imgSrc
    })
    //
    this.$get(`/web/vehicleOrder/getAcceptanceCheckImage?vehicleOrderId=${this.$route.query.id}&type=1`).then(res => {
      this.SellerAcceptanceCheckImage = res.data.data.imgSrc
    })
    // 8-存款账户信息
    this.$get(`/web/zaccount/getDepositAccount?userId=${this.$route.query.userId}`).then(res => {
      this.depositAccount = res.data.data
    })
  },
  methods: {
    open(url) {
      // console.log(url)
      // if (url === null) return
      this.imgUrl = url
      this.imgDialogVisible = true
    },
    openUrl(url) {
      this.url = url
      this.dialogVisible = true
    },
    openUrls(tips, orderNo) {
      const baseURl = process.env.NODE_ENV === 'production' ? 'https://ecarbroker.com.cn/ecarbokerh5/index.html#/' : 'https://test.ecarbroker.com.cn/ecarbokerh5/index.html#/'
      if (tips === '车况担保金订单信息') {
        this.url = baseURl + 'orders/guarantees?id=' + orderNo
        this.dialogVisible1 = true
        console.log(tips, 555)
      } else if (tips === '买方签约并支付车辆检测费用') {
        this.url = baseURl + 'orders/testOrder?vehicleOrderId=' + this.$route.query.id + '&orderNo=' + this.carTest.buyerDetectionFee.orderNo
        this.dialogVisible1 = true
      }
    },
    MyopenUrl(url) {
      this.url = url
      this.dialogVisible1 = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
img{
  cursor: pointer;
}
.content{
  display: flex;
  .box{
    display: flex;
  //  flex-direction: column;
  // margin-right: 10px;
   margin-right: 5px;
   flex-flow: wrap;

    // justify-content: ;
    img{
      margin-right: 5px;
      margin-bottom: 5px;
      width: 100px;
      height: 100px;
    }

  }
}
/deep/ .el-collapse-item__header {
  height: auto;
}
.arrow {
  color: #01bf8f;
}
.line {
  // border: 1px solid #f1f1f1;
  border-top:1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;

  display: flex;
  width: 100%;
  height: 50px;
  overflow: hidden;
  justify-content: space-between;
  > span {
    // line-height: 26px;
  }
  .left {
    display: inline-block;
    text-align: left;
    width: 230px;
    //  flex: 1;
  }
}
.container {
  .el-form-item {
    /deep/ .el-form-item__label {
      font-weight: 700 !important;
    }
  }
  width: 80%;
  margin: 0 auto;
  .title {
    position: relative;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
    text-align: center;
    .btn {
      position: absolute;
      right: 0;
      top: 25px;
    }
  }
  label {
    width: 200px;
    padding-left: 20px;
    display: inline-block;
    text-align: left;
  }
  /deep/ .el-dialog__body {
    min-height: 100px;
    .scroll > iframe {
      @include scrollBar();
    }
  }
}
</style>

